import React, { ReactElement, useState, useEffect } from 'react'
import { Form, Row, Col, Input, Button, Table, Tag, Modal, List, Typography } from 'antd';
// import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { useDispatch, useSelector } from 'umi';
interface Props {

}

export default function Charge({ }: Props): ReactElement {
    const dispatch = useDispatch();
    const shopList = useSelector((state: any) => {
        return state.shopModel.shopList;
    });
    const shopStopCode = useSelector((state: any) => {
        return state.shopModel.shopStopCode;
    });
    useEffect(() => {
        dispatch({
            type: 'shopModel/getShopBySaga',
        })
    }, [shopStopCode]);
    // const [expand, setExpand] = useState(false);
    const [form] = Form.useForm();
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    // const [shopInfo, setShopInfo] = useState({})
    const [warnInfo, setWarnInfo] = useState({})
    const onSelectChange = (selectedRowKeys: any) => {
        // console.log('selectedRowKeys changed: ', selectedRowKeys);
        setSelectedRowKeys(selectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
        selections: [
            Table.SELECTION_ALL,
            Table.SELECTION_INVERT,
            Table.SELECTION_NONE,
        ],
    };
    const handleTableChange = (pagination: any) => {
        setPagination(() => pagination)
    }
    const [pagination, setPagination] = useState<any>(
        {
            current: 1,
            pageSize: 5,
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: [3, 5, 7]
        }
    )
    const columns: any = [
        {
            title: 'id',
            dataIndex: 'id',
            align: 'center',
        },
        {
            title: '商铺名称',
            dataIndex: 'shopName',
            align: 'center',
        },
        {
            title: '信誉积分',
            dataIndex: 'prestige',
            align: 'center',
        },
        {
            title: '商铺状态',
            // dataIndex: 'status',
            align: 'center',
            render: (text: any) => {
                return text ? ((text.status === 1) ? <Tag color="success">启用</Tag> : <Tag color="error">停用</Tag>) : null
            }
        },
        {
            title: '电话',
            dataIndex: 'telephone',
            align: 'center',
        },
        {
            title: '商铺类型',
            // dataIndex: 'type',
            align: 'center',
            render: (text: any) => {
                return ((text.type === 1) ? <Tag color="success">充电站</Tag> : <Tag color="processing">商铺</Tag>)
            },
        },
        {
            title: '门店详情',
            // dataIndex: 'licenceNo',
            align: 'center',
            render: (text: any) => {
                return (<Button type="link" onClick={() => shopDetail(text)}>门店详情</Button>)
            }
        },
        {
            title: '查看警告',
            align: 'center',
            render: (text: any) => {
                return (<Button type="link" onClick={warnDetail}>警告详情</Button>)
            }
        },
        {
            title: '警告',
            align: 'center',
            render: (text: any) => {
                return ((text.prestige < 80) ? <Button>警告</Button> : <Tag color="success">信用良好，请保持</Tag>)
            },
        },
        {
            title: '下架',
            align: 'center',
            render: (text: any) => {
                return (text.status === 1 ? <Button onClick={() => stopShop(text, 1)}>停用</Button> : <Button onClick={() => stopShop(text, 2)}>启用</Button>)
            },
        },
    ];
    const stopShop = (values:any, status:number)=>{
        const id = values.id
        // console.log(id,status);
        dispatch({
            type: 'shopModel/shopStopBySaga',
            payload:  {
                id, status
            }
        })
    }
    const shopDetail = (detail: any) => {
        // console.log(detail);
        // setShopInfo(() => {
        //     return { ...detail }
        // })
        Modal.info({
            title: '商铺详情',
            content: (
                <List>
                    <List.Item >
                        <Typography.Text >商铺名称：{detail.shopName}</Typography.Text>
                    </List.Item >
                    <List.Item >
                        <Typography.Text >商铺账户:{detail.account}</Typography.Text>
                    </List.Item >
                    <List.Item >
                        <Typography.Text>商铺地址:{detail.address}</Typography.Text>
                    </List.Item >
                    <List.Item >
                        <Typography.Text>手机号码:{detail.telephone}</Typography.Text>
                    </List.Item >
                    <List.Item >
                        <Typography.Text>营业执照:{detail.licence}</Typography.Text>
                    </List.Item >
                    <List.Item >
                        <Typography.Text>商铺金额:{detail.money}</Typography.Text>
                    </List.Item >
                    <List.Item >
                        <Typography.Text>店长姓名:{detail.managerName}</Typography.Text>
                    </List.Item >
                    <List.Item >
                        <Typography.Text>身份证号:{detail.idcard}</Typography.Text>
                    </List.Item >
                    <List.Item >
                        <Typography.Text>营业时间:{detail.startTime}~{detail.endTime}</Typography.Text>
                    </List.Item >
                </List>
            ),
            onOk() { },
        });

    }
    const warnDetail = (detail: any) => {
        setWarnInfo(() => detail)
        console.log(warnInfo);
    }
    const locales = { selectionAll: '全选所有', selectInvert: '反选当页', selectNone: '清空所有' }
    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
    };
    return (
        <div>

            <Form form={form} name="advanced_search" className="ant-advanced-search-form" onFinish={onFinish} >
                <Row gutter={24}>
                    <Col span={8} key='shopName'>
                        <Form.Item name='shopName' label='商铺名称' >
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8} style={{ textAlign: 'right' }}>
                        <Button type="primary" htmlType="submit">
                            搜索
                        </Button>
                        <Button style={{ margin: '0 8px' }} onClick={() => { form.resetFields(); }}>
                            重置
                        </Button>
                        {/* <a style={{ fontSize: 12 }} onClick={() => { setExpand(!expand); }} >
                            {expand ? <UpOutlined /> : <DownOutlined />} 展开
                        </a> */}
                    </Col>
                    {/* <Col span={8} key='tel'>
                        <Form.Item name='tel' label='手机号'>
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8} key='managerName'>
                        <Form.Item name='managerName' label='负责人'  >
                            <Input />
                        </Form.Item>
                    </Col>
                    {expand ? <Col span={8} key='idCard'>
                        <Form.Item name='idCard' label='身份证号'  >
                            <Input />
                        </Form.Item>
                    </Col> : null} */}
                </Row>

            </Form>
            <Table rowSelection={rowSelection} columns={columns} dataSource={shopList} rowKey='id' pagination={pagination} onChange={handleTableChange} locale={locales} />

        </div>
    )
}
